<template>
  <div>
    <!-- 筛选条件 -->
    <div class="filter-container">
      <el-form :model="queryParams" :inline="true">
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 150px;">
            <el-option label="显示" value="1" />
            <el-option label="隐藏" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="成员名称">
          <el-input
            v-model="queryParams.username"
            placeholder="请输入成员名称"
            clearable
            maxlength="20"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="成员昵称">
          <el-input
            v-model="queryParams.truename"
            placeholder="请输入成员昵称"
            clearable
            maxlength="20"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号"
            clearable
            maxlength="20"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="微信昵称">
          <el-input
            v-model="queryParams.weixin"
            placeholder="请输入微信昵称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div class="admin-management">
      <div class="header">
        <!-- <h2>成员管理</h2> -->
        <el-button type="primary" v-permission="'admin:basic/member:add'" @click="handleAdd">新增成员</el-button>
      </div>
      <!-- 表格 -->
      <div style="width: 100%; display: flex;">
          <div style="padding: 20px; width: 250px; ">
            <!-- 添加搜索框 -->
            <div style="margin-bottom: 15px;">
              <el-input
                v-model="filterText"
                placeholder="请输入组织名称搜素"
                clearable
                @input="handleFilterInput" style="font-size: 12px; width: 110%;"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            
            <!-- 组织树 -->
            <el-tree style="font-size: 12px !important;"
              ref="organizationTreeRef"
              :data="menuTreeData"
              :props="{ label: 'label', children: 'children' }"
              node-key="value"
              :expand-on-click-node="false"
              :check-strictly="true"
              @node-click="handleNodeClick"
              :current-node-key="queryParams.organizationId"
              highlight-current
              :filter-node-method="filterNode"
            />
          </div>
          
          <div class="table-container">
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column label="排序" width="80">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="handleSort(scope.row)"
                  >
                    {{ scope.$index + 1 }}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="头像" width="80">
                <template #default="scope">
                  <div class="avatar-container" @click="handleAvatarUpload(scope.row)">
                    <el-avatar v-if="scope.row.avatar"
                      :size="40"
                      :src="scope.row.avatar"
                      fit="cover"
                    />
                    <div v-if="uploadingAvatarId === scope.row.id" class="avatar-uploading">
                      <el-progress type="circle" :percentage="uploadProgress" :width="40" />
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="username" label="成员名称" min-width="120" />
              <el-table-column prop="truename" label="成员昵称" min-width="120" />

              <el-table-column prop="role" label="平台角色" width="120">
                <template #default="scope">
                  <el-tag>{{ formatRole(scope.row.role) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="手机号" min-width="120" />
              <el-table-column prop="weixin" label="微信昵称" min-width="120" />
              <el-table-column prop="mail" label="邮箱" min-width="150" />
              <el-table-column prop="sex" label="性别" width="80">
                <template #default="scope">
                  {{ formatSex(scope.row.sex) }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="80">
                <template #default="scope">
                  <el-tag :type="scope.row.status === '1' ? 'success' : 'info'">
                    {{ scope.row.status === '1' ? '显示' : '隐藏' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="160">
                <template #default="scope">
                  {{ formatDate(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="220" fixed="right">
                <template #default="scope">

                  <el-button
                    style="background-color: chocolate;color: #fff;"
                    size="small"
                    v-permission="'admin:basic/member:edit'"
                    @click="handlePassword(scope.row)"
                  >
                    重置密码
                  </el-button>

                  <el-button
                    type="primary"
                    size="small"
                    v-permission="'admin:basic/member:edit'"
                    @click="handleEdit(scope.row)"
                  >
                    编辑
                  </el-button>


                  <el-button
                    size="small"
                    type="danger"
                    v-permission="'admin:basic/member:del'"
                    @click="handleDelete(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
      
        </div>
      





      <!-- 新增/编辑对话框 -->
      <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >

        <!-- 添加隐藏的文件输入框 -->
        <input 
          ref="avatarInputRef"
          type="file" 
          accept="image/*" 
          @change="handleFileSelect" 
          style="display: none"
        />

        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="头像" style="align-items: center;justify-content: center;">
            <div class="avatar-upload-container" @click="handleAvatarUpload(formData)">
              <el-avatar
                :size="80"
                :src="formData.avatar"
                fit="cover"
              />
              <div class="avatar-upload-mask">
                <el-icon><Camera /></el-icon>
              </div>
              <div v-if="uploadingAvatarId === 'form'" class="avatar-uploading-dialog">
                <el-progress type="circle" :percentage="uploadProgress" :width="60" />
              </div>
            </div>
          </el-form-item>

          <el-form-item label="所属组织" prop="organization_id">
              <el-tree-select @change="handleOrganizationChange"
                  v-model="formData.organization_id"
                  :data="menuTreeData"
                  check-strictly
                  :render-after-expand="false"
                  placeholder="请选择所属组织"
                  style="width: 100%"
              />
          </el-form-item>

          <el-form-item label="成员名称" prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入成员名称"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="成员密码" prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              placeholder="请输入成员密码"
              maxlength="20"
              show-word-limit
              show-password
            />
          </el-form-item>


          <el-form-item label="成员昵称" prop="truename">
            <el-input
              v-model="formData.truename"
              placeholder="请输入成员昵称"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>

          
          

          <el-form-item label="平台角色" prop="role">
            <el-select v-model="formData.role" >
              <el-option v-for="item in role_list" :label="item.role_name" :value="item.role_key" />
            </el-select>
          </el-form-item>

          <el-form-item label="成员状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio :value="1">显示</el-radio>
              <el-radio :value="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入手机号"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="微信昵称">
            <el-input
              v-model="formData.weixin"
              placeholder="关联微信后显示"
              disabled
            />
          </el-form-item>
          
          <el-form-item label="邮箱" prop="mail">
            <el-input
              v-model="formData.mail"
              placeholder="请输入邮箱"
              maxlength="50"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
              <el-radio :value="1">男</el-radio>
              <el-radio :value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备注">
            <el-input
              v-model="formData.desc"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
              maxlength="150"
              show-word-limit
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
        </template>
      </el-dialog>

    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Camera } from '@element-plus/icons-vue'
import { systemUserApi } from '@/api/user'
import { convertKeysToSnakeCase } from '@/utils/caseConverter'
import { menuApi, type MenuItem} from '@/api/Organization'
import {fileApi} from '@/api/file'

// 类型定义
interface SystemUser {
  id?: number
  username: string
  password: string
  phone: string
  mail: string
  status: number | string
  desc: string
  truename: string
  avatar: string
  weixin: string
  sex: number | string
  role: string
  createTime?: string
  look?:string
  organization_id  ?: string

  tenant?:{
    company?: string
    image?: string
    period?: string
    domain?: string
  }

  // 新增字段
  company?: string
  image?: string
  period?: string
  domain?: string
}

interface QueryParams {
  pageNum: number
  pageSize: number
  status: string
  username: string
  truename: string
  phone: string
  weixin: string
  role: string
  company: string
  identity: string
  organizationId?: string // 添加这一行
}

// 响应式数据
const loading = ref(false)
const tableData = ref<SystemUser[]>([])
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()
const avatarInputRef = ref<HTMLInputElement>()
const currentRow = ref<SystemUser | null>(null)
const uploadingAvatarId = ref<string | number>('')
const uploadProgress = ref(0)




const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  status: '',
  username: '',
  truename: '',
  phone: '',
  weixin: '',
  company: '',
  role:'',
  identity: '成员',
  organizationId : ''
})

const formData = reactive<SystemUser>({
  username: '',
  password: '',
  phone: '',
  mail: '',
  status: '1',
  desc: '',
  truename: '',
  avatar: '',
  weixin: '',
  sex: '1',
  role: '',
  company: '',
  image: '',
  period: '',
  domain: '',
  organization_id:''
})

// 表单验证规则
const formRules: FormRules = {
  organization_id: [
    { required: true, message: '请选择组织', trigger: 'change' }
  ],
  username: [
    { required: true, message: '请输入成员名称', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9]+$/, message: '只能输入英文或数字', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  truename: [
    { required: true, message: '请输入成员昵称', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
   password: [
    { required: true, message: '请输入管理员密码', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+$/, message: '只能输入英文、数字或符号', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择平台角色', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择用户状态', trigger: 'change' }
  ],
  phone: [
    { pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur' },
    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
  ],
  mail: [
    { pattern: /^[A-Za-z0-9@._-]+$/, message: '只能输入英文、数字或符号', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ]
}

const flatMenuList = ref<MenuItem[]>([]) // 新增：扁平组织列表
const isEdit = ref(false)
const currentId = ref<number | null>(null)

// 计算属性 - 构建树形选择器数据
const menuTreeData = computed(() => {
  if (!flatMenuList.value.length) return []
  
  const formatTree = (menus: MenuItem[], parentId: number = 0): any[] => {
    return menus
      .filter(menu => menu.pid === parentId)
      .map(menu => ({
        value: menu.id,
        label: `${menu.title}`,
        disabled: isEdit.value && currentId.value === menu.id, // 编辑时不能选择自己作为父级
        children: formatTree(menus, menu.id)
      }))
  }
  
  // 添加一个虚拟的根节点来代表"顶级"
  // const rootOption = {
  //   value: 0,
  //   label: '顶级',
  //   disabled: false, // 不应该禁用顶级选项
  //   children: formatTree(flatMenuList.value, 0)
  // }
  
  // return [rootOption]

  //return formatTree(flatMenuList.value, 0)

  // 只在编辑时显示"顶级"选项
  if (isEdit.value) {
    // 添加一个虚拟的根节点来代表"顶级"
    const rootOption = {
      value: 0,
      label: '顶级',
      disabled: false,
      children: formatTree(flatMenuList.value, 0)
    }
    return [rootOption]
  } else {
    // 添加时直接显示组织列表
    return formatTree(flatMenuList.value, 0)
  }


})

// 加载扁平组织列表（用于树形选择器）
const loadFlatMenuList = async () => {
  try {
    const response = await menuApi.getMenuFlatList('')
    if (response.code === 200) {
      flatMenuList.value = response.data
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    ElMessage.error('获取组织列表失败')
  }
}


// 在 script 的方法部分添加
const handleNodeClick = (data: any) => {
  queryParams.organizationId = data.value;
  handleQuery();
}

// 在响应式数据部分添加
const filterText = ref('')
const organizationTreeRef = ref()

// 在方法部分添加
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.label.includes(value)
}

const handleFilterInput = (value: string) => {
  organizationTreeRef.value?.filter(value)
}

// 方法
const getList = async () => {
  loading.value = true
  try {
    //API调用
    const res = await systemUserApi.getList(queryParams)
    tableData.value = res.data.list
    total.value = res.data.total
    
    // 模拟数据
    setTimeout(() => {
      loading.value = false
    }, 500)
  } catch (error) {
    loading.value = false
    ElMessage.error('获取数据失败')
  }
}

const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

const resetQuery = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    status: '',
    username: '',
    truename: '',
    phone: '',
    weixin: '',
    role: '',
    identity:'成员',
    organizationId: '' // 添加这一行
  })
  getList()
}

const role_list = ref()
const handleOrganizationChange = (value: string) => {
  formData.organization_id = value
  menuApi.getRoleList(Number(value)).then(res => { 
    formData.role = ''
    role_list.value = res.data
  })
}
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val
  getList()
}

const handlePassword = (row: any) => {
  ElMessageBox.confirm(
    `确定要重置用户 "${row.truename}" 的密码吗？`,
    '重置密码确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      // 准备重置密码的数据，用户名+123
      const resetData = {
        id: row.id,
        password: row.username + '123'
      };
      
      // 调用重置密码API
      const result = await systemUserApi.resetPassword(convertKeysToSnakeCase(resetData));
      
      if (result.code === 200) {
        getList()
        ElMessage.success('密码重置成功');
      } else {
        ElMessage.error('密码重置失败: ' + result.message);
      }
    } catch (error: any) {
      ElMessage.error('密码重置失败: ' + (error.message || '未知错误'));
    }
  }).catch(() => {
    // 用户取消操作
    ElMessage.info('已取消重置密码');
  });
}

const handleAdd = () => {
  dialogTitle.value = '新增成员'
  dialogVisible.value = true
  resetForm()
}

const handleEdit = (row: SystemUser) => {
  dialogTitle.value = '编辑成员'
  dialogVisible.value = true

  if(row.organization_id){
    menuApi.getRoleList(Number(row.organization_id)).then(res => { 
      role_list.value = res.data
    })
  }

  nextTick(() => {
    row.password = row.look?? '';
    row.sex = Number(row.sex),
    row.status= Number(row.status)
    Object.assign(formData, row)
  })
}

const handleDelete = async (row: SystemUser) => {
  try {
    await ElMessageBox.confirm(
      `确定删除 "${row.truename}" 吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用删除API
    const result = await systemUserApi.delete(row.id)
    if (result.code == 200) {
      ElMessage.success('删除成功')
      getList()
    } else {
      ElMessage.error('删除失败'+result.message)
      return false
    }
  } catch (error:any) {
    // 用户取消删除
    ElMessage.error('删除失败，请重试')
  }
}

const handleSort = (row: SystemUser) => {
  ElMessage.info(`排序功能开发中，当前操作：${row.truename}`)
}

const handleAvatarUpload = (row: SystemUser) => {
  currentRow.value = row
  avatarInputRef.value?.click()
}

const handleClose = () => {
  dialogVisible.value = false
  resetForm()
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  Object.assign(formData, {
    username: '',
    password: '',
    phone: '',
    mail: '',
    status: '1',
    desc: '',
    truename: '',
    avatar: '',
    weixin: '',
    sex: '1',
    role: '',
    identity:'成员'
  })
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    
    // 调用API保存数据
    if (formData.id) {
      // 编辑
      let json = convertKeysToSnakeCase(formData)
      const result = await systemUserApi.update(json)
      if (result.code == 200) {
        ElMessage.success('更新成功')
      } else {
        ElMessage.error('更新失败'+result.message)
        return false
      }
    } else {
      // 新增
      let json = convertKeysToSnakeCase(formData)
      const result = await systemUserApi.add(json)
      if (result.code == 200) {
        ElMessage.success('新增成功')
      } else {
        ElMessage.error('新增失败'+result.message)
        return false
      }
    }
    
    dialogVisible.value = false
    getList()
  } catch (error: any) {
    // 错误信息已经在子组件中显示
    console.error('表单提交错误:', error);
    if(error.code == 500||error.code == 400){
      ElMessage.error(error.message)
    }
  }

}


interface RoleItem {
  role_key: string
  role_name: string
}
const roleAllList = ref<RoleItem[]>([])

const formatRole = (roleKey: string) => {
  if (!roleKey) return ''
  
  const roleItem = roleAllList.value.find((item: any) => item.role_key === roleKey)
  return roleItem ? roleItem.role_name : roleKey
}

const formatSex = (sex: string) => {
  const sexMap: Record<string, string> = {
    '1': '男',
    '2': '女'
  }
  return sexMap[sex] || sex
}

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString()
}

// 添加文件选择处理方法
const handleFileSelect = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const file = input.files[0]
    uploadAvatar(file)
  }
}

// 实现上传头像的方法
const uploadAvatar = async (file: File) => {
  if (!currentRow.value) return
  
  uploadingAvatarId.value = currentRow.value.id || 'form'
  uploadProgress.value = 0
  
  // 模拟上传进度
  const progressInterval = setInterval(() => {
    if (uploadProgress.value < 90) {
      uploadProgress.value += 10
    }
  }, 200)
  
  try {
    // 这里需要替换成你实际的上传 API
    // 示例：
    // 模拟上传过程
    // await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 模拟上传成功后的 URL
    // const mockUrl = URL.createObjectURL(file)

    const response = await fileApi.upload(file)
    const mockUrl = response.data.url
    console.log('上传成功，文件地址：', mockUrl)

    clearInterval(progressInterval)
    uploadProgress.value = 100
    
    // 更新头像显示
    if (currentRow.value.id) {
      // 更新表格中的头像
      const index = tableData.value.findIndex(item => item.id === currentRow.value!.id)
      if (index !== -1 && tableData.value[index]) {
        tableData.value[index].avatar = mockUrl
      }
    } else {
      // 更新表单中的头像
      formData.avatar = mockUrl
    }
    
    ElMessage.success('头像上传成功')
  } catch (error) {
    ElMessage.error('头像上传失败')
  } finally {
    setTimeout(() => {
      uploadingAvatarId.value = ''
      uploadProgress.value = 0
      // 清空文件输入框
      if (avatarInputRef.value) {
        avatarInputRef.value.value = ''
      }
    }, 500)
  }
}

// 生命周期
onMounted(() => {
  getList()
  loadFlatMenuList()
  menuApi.roleAllList().then(res => { 
    roleAllList.value = res.data
  })
})

</script>

<style scoped>
.el-text{
  font-size: 12px !important;
}
.admin-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.filter-container {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.table-container {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.avatar-container {
  display: flex;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.avatar-uploading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.avatar-upload-container {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.avatar-upload-container:hover .avatar-upload-mask {
  display: flex;
}

.avatar-upload-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.avatar-uploading-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.logo-upload-container {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-upload-container:hover .logo-upload-mask {
  display: flex;
}

.logo-upload-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}
</style>